<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script>
	$(document).ready(function(){
		$("#flip").click(function(){
			$("#panel").slideDown(5000);
		});
		$("#stop").click(function(){
			$("#panel").stop();
		});
	});
</script>
<style type="text/css">
	#flip, #panel{
		padding: 5px;
		text-align: center;
		background-color: #e5eecc;
		border: solid 1px #c3c3c3;
	}
	#panel{
		padding: 50px;
		display: none;
		}
</style>
</head>
<body>
<div id="flip">Click to slideDown panel</div>
<div id="panel">PanelPanelPanel</div>
<div id="stop">Click to Stop panel</div>


</body>
</html>